<template>
	<view class="webview">
		<web-view :src="urls">
			<cover-view class="foot">
				<cover-view class="footer">
					<cover-view class="back" @click="onBack">返回活动详情</cover-view>
					<cover-view class="share">
						<button open-type="share" class="sharebtn">分享给好友</button>
					</cover-view>
				</cover-view>
			</cover-view>
			<cover-view class="group" @click="onPreQrcode">
				<cover-view class="icon">
					<cover-image class="image"
						src="https://img.alicdn.com/imgextra/i1/2064565174/O1CN01xeJcrO1o5k37Qfk1I_!!2064565174.gif">
					</cover-image>
				</cover-view>
				<cover-view class="text">进群</cover-view>
			</cover-view>
			<cover-view class="more" @click="onBack">
				<cover-view class="icon">
					<cover-image class="image"
						src="https://img.alicdn.com/imgextra/i3/2064565174/O1CN01WyjUra1o5k3Bwvuxf_!!2064565174.gif">
					</cover-image>
				</cover-view>
				<cover-view class="text">更多</cover-view>
			</cover-view>
		</web-view>
	</view>
</template>

<script>
	import {
		insert
	} from '@/utils/ad.js';
	import {
		config
	} from '@/api/system.js';
	export default {
		data() {
			return {
				spool: {},
				share: {},
				store: {},
				userInfo: {},
				urls: ''
			};
		},
		onShareTimeline() {
			let _this = this
			let referee_id = ''
			if (_this.userInfo.user_id) {
				referee_id = _this.userInfo.user_id
			}
			return {
				imageUrl: _this.share.cover,
				title: "@" + _this.share.title
			}
		},
		onShareAppMessage() {
			let _this = this
			let referee_id = ''
			if (_this.userInfo.user_id) {
				referee_id = _this.userInfo.user_id
			}
			return {
				imageUrl: _this.share.cover,
				title: "@" + _this.share.title,
				desc: _this.share.desc
			}
		},
		onLoad(options) {
			this.urls = decodeURIComponent(options.urls)
			this.getStore()
			this.getShare()
			this.getSpool()
		},
		methods: {
			onBack() {
				uni.switchTab({
					url: '/pages/main/index/index'
				})
			},
			onPreQrcode() {
				uni.previewImage({
					urls: [this.store.group_qrcode]
				})
			},
			getSpool() {
				let _this = this;
				config({
					key: 'spool'
				}).then(res => {
					_this.spool = res.data.config
					if (_this.spool.insert.status == 10) {
						insert.load(_this.spool.insert.id)
						insert.show()
						setTimeout(() => {
							insert.show()
						}, 2000)
					}
				}).catch(err => {

				})
			},
			getStore() {
				config({
					key: 'store'
				}).then(res => {
					this.store = res.data.config
					uni.setNavigationBarTitle({
						title: this.store.name
					})
				}).catch(err => {

				})
			},
			getShare() {
				config({
					key: 'share'
				}).then(res => {
					this.share = res.data.config
				}).catch(err => {

				})
			},
		}
	}
</script>

<style lang="scss">
	.group {
		position: fixed;
		z-index: 999999;
		background: rgba(250, 53, 52, 0.8);
		height: 120rpx;
		width: 120rpx;
		bottom: 50%;
		border-radius: 50%;
		right: 15rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.icon {
			margin-bottom: 10rpx;

			.image {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.text {
			font-size: 24rpx;
			color: #fff;
		}
	}

	.more {
		position: fixed;
		z-index: 999999;
		background: #18b566;
		height: 120rpx;
		width: 120rpx;
		bottom: 64%;
		border-radius: 50%;
		right: 15rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.icon {
			margin-bottom: 10rpx;

			.image {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.text {
			font-size: 24rpx;
			color: #fff;
		}
	}

	.foot {
		position: fixed;
		z-index: 999999;
		background: #fff;
		bottom: 0rpx;
		left: 0;
		width: 100%;
		font-size: 14px;
		padding: 5px 0px;
		padding-bottom: 30rpx;

		.footer {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100rpx;

			.back {
				color: #EB5A57;
				background: #fff;
				border-radius: 4px;
				border: 1px #EB5A57 solid;
				width: 40%;
				text-align: center;
				height: 81rpx;
				line-height: 81rpx;
				margin-right: 5%;
			}

			.share {
				border-radius: 4px;
				width: 40%;
				text-align: center;
				height: 81rpx;
				margin-left: 5%;
				position: relative;

				.sharebtn {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					font-size: 14px;
					background: #EB5A57;
					color: 口#fff;
					height: 81rpx;
					line-height: 81rpx;
					color: #fff;
				}
			}
		}
	}
</style>
